import { Tag } from "antd";
import { Fragment } from "react";

export default function CheckableTag({
  value,
  onChange,
  options
                                     }:{
  value?: string[];
  onChange?: (value?: string[])=>void;
  options?: {label: string;value:string}[]
}){

  return <Fragment>
    {options?.map((option) => {
      return <Tag.CheckableTag
        key={option.value}
        checked={!!value?.includes(option.value)}
        onChange={(checked) => {
          const nextSelectedTags = checked
            ? [...(value ?? []), option.value]
            : value?.filter((v) => v !== option.value);
          onChange?.(nextSelectedTags);
        }}
      >
        {option.label}
      </Tag.CheckableTag>
    })}
  </Fragment>
}
